import React, { useState, useEffect } from 'react';
import Store from "./../store/store"
import * as actions from './../store/actions'
const AboutViews = () => {
  console.log(Store.getState()); //{count:0}
  const [number, setNumber] = useState(Store.getState().count);
  useEffect(() => {
    // subscribe(),监听store中state得改变，如果State改变了，就执行里面得callback.
    // subscribe()默认返回一个函数，此函数在uesEffect中，用于取消对store得监听。
    let unSubscribe = Store.subscribe(() => {
      setNumber(Store.getState().count)
    })

    // 在componentWillUnMount时，执行Return后面得回调函数
    return () => {
      unSubscribe()
    }
  })
  return (
    <div>
      <h1>AboutViews</h1>
      <div>
        count: {number}
      </div>
      <div>
        <button type='button' onClick={
          () => {
            Store.dispatch(actions.addNum(1000))
          }
        }>+++++</button>

        <button type='button' onClick={() => {
          Store.dispatch(actions.jian(500))
        }}> -----</button>
      </div>
    </div>
  );
}

export default AboutViews;
